<%--
  Created by IntelliJ IDEA.
  User: 徐洲
  Date: 2023/12/14
  Time: 23:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="java.util.List" %>
<%@ page import="com.bean.Article" %>
<%@ page import="com.util.Pagination" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  request.setCharacterEncoding("UTF-8");
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<jsp:useBean id="categoryDao" class="com.daoImpl.CategoryDAOImpl"></jsp:useBean>
<jsp:useBean id="articleDao" class="com.daoImpl.ArticleDAOImpl"></jsp:useBean>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>摆烂俱乐部</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
  <!-- Google fonts - Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
  <!-- owl carousel-->
  <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.css">
  <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.css">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="css/custom.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="favicon.png">
  <!-- Tweaks for older IEs--><!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>

<%String username = (String) session.getAttribute("username");%>
<!-- navbar-->
<header class="header mb-5">
  <!--
  *** TOPBAR ***
  _________________________________________________________
  -->
  <jsp:include page="common/login.jsp"></jsp:include>
  <jsp:include page="common/top2.jsp"></jsp:include>
  <jsp:include page="common/search.jsp"></jsp:include>
</header>

<%
  List<Article> articleListMy = null;
    request.setCharacterEncoding("utf-8");
    articleListMy = articleDao.getArticleByMy(username);
//                request.setAttribute("articleListMy", articleListMy);

    //分页逻辑开始
    Pagination<Article> m_pages = new Pagination<Article>();
    int curPages = m_pages.curPages(m_pages.strPage(request, "page"));//获取当前页码
    m_pages.setRows(10);//设置每页显示10条
    int resultconts = articleListMy.size();//取得总的数据数
    int totalPages = m_pages.getPages(resultconts);//取出总页数
    ArrayList<Article> articleMyPage = m_pages.getPageSet(articleListMy, curPages);//获取指针的结果集参数是(结果集，页数)
    //分页逻辑结束
    request.setAttribute("articleMyPage", articleMyPage);
%>

<div id="all">
  <div id="content">
    <div class="container">
      <%--        <div class="row">--%>
      <%--            <div class="col-lg-9">--%>
      <%--              <div class="box">--%>
      <%--                <h1>Electronic piano</h1>--%>
      <%--                <p>In this page, we provide you with all kinds of electronic pianos, you can definitely find the one you need here.</p>--%>
      <%--              </div>--%>

      <div class="row products">
        <div class="col-lg-12 col-md-12">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="index.jsp">家</a></li>
              <li aria-current="page" class="breadcrumb-item active">我的文章</li>
            </ol>
          </nav>
          <div class="box">
            <h1>我的文章</h1>
            <p>在这个页面上，我们为您提供各种各样关于海洋的文章，您可以在这里找到您需要的文章。</p>

            <%if(username==null){%>
            <a class="btn btn-primary" href="register.jsp"><i
                    class="fa fa-sign-in"></i>发表文章</a>
            <%}else{
            %>
            <a class="btn btn-primary" href="article_add.jsp"><i
                    class="fa fa-sign-in"></i>发表文章</a>
            <%}%>
          </div>
          <form method="post" action="./article?action=deleteAll">
            <table class="table table-bordered table-hover"
                   style="width: 1400px">
              <tr>
                <th style="width: 200px;">
                  <div style="display: flex">
                    <div class="custom-checkbox" style="flex: 1">
                      <label>
                        <input type="checkbox" id="selAll" onclick="selectAll();" />全选
                      </label>
                    </div>
                    <div class="custom-checkbox" style="flex: 1">
                      <label>
                        <input type="checkbox" id="inverse" onclick="setNoSelect();" />反选
                      </label>
                    </div>
                    <%if ( (articleListMy != null) && (articleListMy.size() != 0)){%>
                      <button type="submit" name="submit" class="btn btn-danger">删除</button>
                    <%}%>
                  </div>
                </th>
                <th style="width: 100px">文章编号</th>
                <th style="width: 100px">文章封面</th>
                <th style="width: 100px">文章标题</th>
                <th style="width: 100px">文章类型</th>
                <th style="width: 100px">文章作者</th>
                <th style="width: 150px">发表时间</th>
                <th style="width: 150px">修改时间</th>
                <th style="width: 200px">操作</th>
              </tr>
              <c:forEach items="${articleMyPage}" var="item" varStatus="count">
                <tr class="active">
                  <td>
                    <div class="custom-checkbox">
                      <label>
                        <input type="checkbox" name="checkAll" value="${item.article_id}" id="checkAll" onclick="setSelectAll();"/>
                      </label>
                    </div>
                  </td>
                  <td>${count.index+1}</td>
                  <td><img style="width: 50px; height: 50px" src="upload/article/${item.article_cover}" alt="文章封面"/></td>
                  <td>${item.article_title}</td>
                  <td>${item.category_name}</td>
                  <td>${item.username}</td>
                  <td>${item.create_time}</td>
                  <td>${item.update_time}</td>
                  <td style="display: flex">
                    <p class="buttons" style="flex: 1"><a href="article_detail.jsp?article_id=${item.article_id}" class="btn btn-outline-secondary">详情</a></p>
                    <p class="buttons" style="flex: 1"><a href="article_edit.jsp?article_id=${item.article_id}" class="btn btn-outline-secondary">修改</a></p>
                  </td>
                </tr>
              </c:forEach>
            </table>

            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <li class="page-item">
                  <a class="page-link" href="article_list.jsp?page=1">首页</a></li> <%
                if (curPages > 1) {
              %><li class="page-item"><a class="page-link" href="article_list.jsp?page=<%=curPages - 1%>">上一页</a></li> <%
                }
              %> <%
                if (curPages < totalPages) {
              %><li class="page-item"><a class="page-link" href="article_list.jsp?page=<%=curPages + 1%>">下一页</a></li> <%
                }
              %>
                <li class="page-item"> <a class="page-link" href="article_list.jsp?page=<%=totalPages%>">末页</a>
                </li>
              </ul>
            </nav>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>


<!--
  *** 版权 ***
  _________________________________________________________
  -->

<jsp:include page="common/copyright.jsp"></jsp:include>

<!-- *** COPYRIGHT END ***-->
<!-- JavaScript files-->
<script>
  function addActiveClass(element) {
    // 移除所有a标签的active class
    const links = document.querySelectorAll('.subheading');
    links.forEach(link => {
      link.classList.remove('active');
    });
    // 给当前点击的a标签添加active class
    element.classList.add('active');
  }

  //选中全选按钮，下面的checkbox全部选中
  var selAll = document.getElementById("selAll");
  function selectAll()
  {
    var obj = document.getElementsByName("checkAll");
    if(document.getElementById("selAll").checked == false)
    {
      for(var i=0; i<obj.length; i++)
      {
        obj[i].checked=false;
      }
    }else
    {
      for(var i=0; i<obj.length; i++)
      {
        obj[i].checked=true;
      }
    }

  }

  //当选中所有的时候，全选按钮会勾上
  function setSelectAll()
  {
    var obj=document.getElementsByName("checkAll");
    var count = obj.length;
    var selectCount = 0;

    for(var i = 0; i < count; i++)
    {
      if(obj[i].checked == true)
      {
        selectCount++;
      }
    }
    if(count == selectCount)
    {
      document.all.selAll.checked = true;
    }
    else
    {
      document.all.selAll.checked = false;
    }
  }

  //反选按钮
  function setNoSelect() {
    var checkboxs=document.getElementsByName("checkAll");
    for (var i=0;i<checkboxs.length;i++) {
      var e=checkboxs[i];
      e.checked=!e.checked;
      setSelectAll();
    }
  }
</script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.js"></script>
<script src="js/front.js"></script>
</body>
</html>
